import React, { useState, useEffect, useRef, useCallback } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot, collection, query, serverTimestamp, deleteDoc, updateDoc, FieldValue, getDoc } from 'firebase/firestore';
// Tone.js is loaded via a script tag in the HTML for global access.
// Example: <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>

const App = () => {
    // Firebase states
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);

    // Application-specific states
    const [currentVisitors, setCurrentVisitors] = useState(0);
    const [totalVisitorsCount, setTotalVisitorsCount] = useState(0);
    const [uptime, setUptime] = useState('');

    // Nyan Cat GIF management
    const nyanGifs = useRef([
        // Updated GIF URLs for better embedding reliability
        "https://i.giphy.com/media/sIIh4zF9uJgY/giphy.gif", // Original
        "https://i.giphy.com/media/RkhTEoD6N5D0W0X9t6/giphy.gif", // Different angle
        "https://i.giphy.com/media/TTAi42ZfS6A08/giphy.gif", // Pixel art style
        "https://i.giphy.com/media/wM90d5Sj9gUjK/giphy.gif", // 8-bit style
        "https://i.giphy.com/media/sSfY2u5MhW5fJzW3/giphy.gif" // Space background
    ]);
    const [currentGifIndex, setCurrentGifIndex] = useState(0);

    // Refs for Tone.js
    const synthRef = useRef(null);
    const sequenceRef = useRef(null);
    const sessionIdRef = useRef(crypto.randomUUID());

    // Site launch date
    const siteLaunchDate = useRef(new Date('2024-06-13T00:00:00Z'));

    /**
     * Handles clicking on the Nyan Cat GIF to switch to the next one in the list.
     */
    const handleGifClick = () => {
        setCurrentGifIndex((prevIndex) =>
            (prevIndex + 1) % nyanGifs.current.length // Cycle through the array
        );
    };

    /**
     * useEffect Hook: Initializes Firebase and handles user authentication.
     * Runs only once on component mount.
     */
    useEffect(() => {
        let app, firestore, authentication;
        try {
            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
            const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};

            app = initializeApp(firebaseConfig);
            firestore = getFirestore(app);
            authentication = getAuth(app);

            setDb(firestore);
            setAuth(authentication);

            const unsubscribeAuth = onAuthStateChanged(authentication, async (user) => {
                if (user) {
                    setUserId(user.uid);
                } else {
                    try {
                        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                            await signInWithCustomToken(authentication, __initial_auth_token);
                        } else {
                            await signInAnonymously(authentication);
                        }
                    } catch (error) {
                        console.error("Firebase authentication error:", error);
                        setUserId(crypto.randomUUID());
                    }
                }
                setIsAuthReady(true);
            });

            return () => unsubscribeAuth();
        } catch (error) {
            console.error("Failed to initialize Firebase:", error);
            setUserId(crypto.randomUUID());
            setIsAuthReady(true);
        }
    }, []);

    /**
     * useEffect Hook: Initializes Tone.js synthesizer and sequence for the Nyan Cat theme.
     * Runs only once on component mount.
     */
    useEffect(() => {
        if (typeof window.Tone !== 'undefined' && !synthRef.current) {
            console.log("Tone.js detected, initializing synthesizer and starting music...");
            synthRef.current = new window.Tone.Synth().toDestination();
            sequenceRef.current = new window.Tone.Sequence((time, note) => {
                synthRef.current.triggerAttackRelease(note, "8n", time);
            }, ["C5", "G4", "E4", "G4", "A4", "G4", "F4", "D4"]).start(0);
            sequenceRef.current.loop = true;
            sequenceRef.current.playbackRate = 1.5;
            window.Tone.Transport.bpm.value = 120;

            const startAudio = async () => {
                try {
                    await window.Tone.start();
                    window.Tone.Transport.start();
                    console.log("Nyan Cat theme started automatically!");
                } catch (e) {
                    console.error("Failed to start Tone.js audio context:", e);
                }
            };
            startAudio();

        } else if (typeof window.Tone === 'undefined') {
            console.warn("Tone.js (window.Tone) is not yet defined. Music functionality may be delayed or unavailable.");
        }

        return () => {
            if (sequenceRef.current) {
                sequenceRef.current.dispose();
                sequenceRef.current = null;
            }
            if (synthRef.current) {
                synthRef.current.dispose();
                synthRef.current = null;
            }
        };
    }, []);

    /**
     * useEffect Hook: Calculates and updates the site's uptime every second.
     * Runs only once on component mount.
     */
    useEffect(() => {
        const calculateUptime = () => {
            const now = new Date();
            const diff = now.getTime() - siteLaunchDate.current.getTime();

            const seconds = Math.floor(diff / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);
            const days = Math.floor(hours / 24);
            const months = Math.floor(days / 30.44);
            const years = Math.floor(days / 365.25);

            const remainingMonths = months % 12;
            const remainingDays = Math.floor(days % 30.44);
            const remainingHours = hours % 24;
            const remainingMinutes = minutes % 60;
            const remainingSeconds = seconds % 60;

            let uptimeString = '';
            if (years > 0) uptimeString += `${years} year${years !== 1 ? 's' : ''}, `;
            if (remainingMonths > 0) uptimeString += `${remainingMonths} month${remainingMonths !== 1 ? 's' : ''}, `;
            if (remainingDays > 0) uptimeString += `${remainingDays} day${remainingDays !== 1 ? 's' : ''}, `;
            uptimeString += `${remainingHours} hour${remainingHours !== 1 ? 's' : ''}, `;
            uptimeString += `${remainingMinutes} minute${remainingMinutes !== 1 ? 's' : ''}, `;
            uptimeString += `${remainingSeconds} second${remainingSeconds !== 1 ? 's' : ''}`;

            setUptime(uptimeString.trim());
        };

        const intervalId = setInterval(calculateUptime, 1000);
        calculateUptime();

        return () => clearInterval(intervalId);
    }, []);

    /**
     * useEffect Hook: Handles concurrent and total visitor tracking using Firestore.
     */
    useEffect(() => {
        if (!db || !isAuthReady || !userId) {
            console.log("Firestore not ready for visitor logic. Waiting for initialization...");
            return;
        }

        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const sessionDocRef = doc(db, `artifacts/${appId}/public/data/activeSessions`, sessionIdRef.current);
        const globalStatsDocRef = doc(db, `artifacts/${appId}/public/data/siteStats/globalStats`);
        const countedSessionDocRef = doc(db, `artifacts/${appId}/public/data/countedSessions`, sessionIdRef.current);

        const initializeTotalVisits = async () => {
            try {
                await setDoc(globalStatsDocRef, { totalVisits: 0 }, { merge: true });
            } catch (error) {
                console.error("Error initializing total visits document:", error);
            }
        };

        const incrementTotalVisits = async () => {
            try {
                const sessionCountDoc = await getDoc(countedSessionDocRef);

                if (!sessionCountDoc.exists()) {
                    await setDoc(countedSessionDocRef, { timestamp: serverTimestamp() });
                    await updateDoc(globalStatsDocRef, {
                        totalVisits: FieldValue.increment(1)
                    });
                    console.log("Total visitors count incremented for new session.");
                } else {
                    console.log("Session already counted for total visitors.");
                }
            } catch (error) {
                console.error("Error incrementing total visitors:", error);
            }
        };

        initializeTotalVisits();
        incrementTotalVisits();

        const updateLastActive = async () => {
            try {
                await setDoc(sessionDocRef, {
                    lastActive: serverTimestamp(),
                    userId: userId,
                }, { merge: true });
                console.log(`Concurrent session ${sessionIdRef.current} updated in Firestore.`);
            } catch (error) {
                console.error("Error updating concurrent session in Firestore:", error);
            }
        };

        const updateInterval = setInterval(updateLastActive, 5000);
        updateLastActive();

        const sessionsCollectionRef = collection(db, `artifacts/${appId}/public/data/activeSessions`);
        const unsubscribeConcurrentSnapshot = onSnapshot(sessionsCollectionRef, (snapshot) => {
            const now = Date.now();
            const activeThreshold = 15 * 1000;
            let count = 0;
            snapshot.docs.forEach(doc => {
                const data = doc.data();
                if (data.lastActive && typeof data.lastActive.toMillis === 'function') {
                    if (now - data.lastActive.toMillis() < activeThreshold) {
                        count++;
                    }
                }
            });
            setCurrentVisitors(count);
            console.log(`Current active visitors: ${count}`);
        }, (error) => {
            console.error("Error listening to active sessions:", error);
        });

        const unsubscribeTotalVisitors = onSnapshot(globalStatsDocRef, (docSnap) => {
            if (docSnap.exists()) {
                setTotalVisitorsCount(docSnap.data().totalVisits || 0);
            } else {
                setTotalVisitorsCount(0);
            }
        }, (error) => {
            console.error("Error listening to total visitors:", error);
        });

        return () => {
            clearInterval(updateInterval);
            unsubscribeConcurrentSnapshot();
            unsubscribeTotalVisitors();

            const deleteSession = async () => {
                if (db && userId) {
                    try {
                        await deleteDoc(sessionDocRef);
                        console.log(`Concurrent session ${sessionIdRef.current} deleted on unload.`);
                    } catch (error) {
                        console.error("Error deleting concurrent session on unload:", error);
                    }
                }
            };

            window.addEventListener('beforeunload', deleteSession);
            return () => {
                window.removeEventListener('beforeunload', deleteSession);
            };
        };
    }, [db, isAuthReady, userId]);

    // Display a loading message until Firebase authentication is ready.
    if (!isAuthReady) {
        return (
            <div className="flex items-center justify-center min-h-screen bg-pink-200 text-pink-800">
                <p className="text-xl md:text-2xl animate-pulse">Loading Nyan Cat magic...</p>
            </div>
        );
    }

    return (
        // Main container for the app, styled with Tailwind CSS for responsiveness and aesthetics.
        // Reverted to the original colorful gradient background.
        <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-400 via-pink-400 to-red-400 font-inter p-4 overflow-hidden">
            {/* Content card: holds all main elements - no hover effect */}
            <div className="bg-white p-8 rounded-xl shadow-2xl flex flex-col items-center max-w-lg w-full transform transition-transform duration-300">
                {/* Title */}
                <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6 text-center leading-tight">
                    Welcome to the Nyan-tastic Site!
                </h1>

                {/* Nyan Cat GIF */}
                <img
                    src={nyanGifs.current[currentGifIndex]} // Use current GIF from state
                    alt="Nyan Cat"
                    onClick={handleGifClick} // Add click handler to change GIF
                    // Tailwind classes for responsive sizing, rounded corners, shadow, and hover effect.
                    // Added aspect-square and object-contain for 1:1 aspect ratio
                    className="w-full aspect-square object-contain rounded-lg mb-8 shadow-lg transform hover:scale-105 transition-transform duration-300 cursor-pointer"
                    // Fallback for GIF loading errors: display a placeholder image.
                    onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/400x300/e0e0e0/ffffff?text=Nyan+Cat+GIF"; }}
                />

                {/* Concurrent Visitors Count */}
                <div className="text-xl md:text-2xl text-gray-700 text-center mb-4">
                    <p>People on the site right meow: <span className="font-bold text-pink-600">{currentVisitors}</span></p>
                </div>

                {/* Total Visitors Count */}
                <div className="text-xl md:text-2xl text-gray-700 text-center mb-4">
                    <p>Total visitors so far: <span className="font-bold text-blue-600">{totalVisitorsCount}</span></p>
                </div>

                {/* Site Uptime Display */}
                <div className="text-lg md:text-xl text-gray-600 text-center mb-6">
                    <p>Site has been up for:</p>
                    <p className="font-semibold text-purple-700">{uptime}</p>
                </div>
            </div>

            {/* Credit to Original Creators */}
            <p className="mt-6 text-white text-md opacity-90 text-center">
                Inspired by the original Nyan Cat by <a href="https://nyan.cat/" target="_blank" rel="noopener noreferrer" className="font-bold underline hover:text-yellow-300 transition-colors duration-200">nyan.cat</a>
            </p>

            {/* User ID display (for debugging/identification in a multi-user environment) */}
            <p className="mt-2 text-white text-sm opacity-80 text-center">
                Your user ID for this session: <span className="font-mono">{userId || 'N/A'}</span>
            </p>
        </div>
    );
};

export default App;